<template>
	<view class="brandDetailList" :style="{height: bikeList.length > 0 ? 'auto': '100vh'}">
		<!-- 支付宝自定义导航栏 -->
		<CustomBar />
		<view v-if="bikeList.length > 0">
			<view class="bike" v-for="item in bikeList" :key="item.id" @click="goBikeDetail(item)">
				<image :src="imgUrl + item.img.split(',')[0]"></image>
				<view class="bikeParams">
					<view class="bikeName"> {{item.name}}</view>
				</view>
			</view>
			<view class="loadMore">
				<u-loading-icon v-if="loadMoreStatus === 'loading'"></u-loading-icon>
				{{loadMoreText}}
			</view>
		</view>
		<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import request from '../../api/index.js'
	import {
		imgUrl
	} from '../../util/index.js'
	export default {
		data() {
			return {
				bikeList: [],
				imgUrl,
				pageNum: 1,
				pageSize: 5,
				totalNum: 0,
				brandId: '',
				loadMoreStatus: 'more',
				loadMoreText: ''
			}
		},
		onShow() {
			// #ifdef MP-ALIPAY
			my.setNavigationBar({
				frontColor: '#0000',
				backgroundColor: '#ffffff',
			})
			// #endif
		},
		async onPullDownRefresh() {
			this.pageNum = 1;
			this.pageSize = 5;
			this.bikeList = [];
			await this.getBrandBikeList()
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			console.log('页面触底了嘛')
			let allTotalNum = this.pageSize * this.pageNum
			if (allTotalNum < this.totalNum) {
				this.loadMoreStatus = 'loading'; //加载中状态
				this.loadMoreText = '正在加载中'
				this.pageNum++;
				setTimeout(async () => {
					await this.getBrandBikeList()
				}, 1500)
			} else {
				console.log('已加载全部')
				this.loadMoreStatus = 'noMore'
				this.loadMoreText = '已加载全部'
			}
		},
		onLoad(option) {
			this.brandId = option.brandId
			uni.setNavigationBarTitle({
				title: option.brandName
			})
			this.getBrandBikeList()
		},
		methods: {
			getBrandBikeList(option) {
				request('/bike/list', {
					brandId: this.brandId,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, 'GET').then(res => {
					if (res.status === 0) {
						this.bikeList.push(...res.data.pageData)
						this.totalNum = res.data.total
						if (this.totalNum !== this.bikeList.length) {
							this.loadMoreText = '查看更多'
						} else {
							this.loadMoreText = '全部加载完成'
						}
					}
				})
			},
			goBikeDetail(item) {
				// const token = uni.getStorageSync('token')
				// if (token) {
				// 	uni.navigateTo({
				// 		url: `/pages/bikeDetail/bikeDetail?bikeId=${item.id}&&bikeType=${item.bikeType}`
				// 	})
				// } else {
				// 	this.$refs.uToast.show({
				// 		type: 'default',
				// 		message: "未登录",
				// 	})
				// 	uni.redirectTo({
				// 		url: '/pages/login/login'
				// 	})

				// }
				uni.navigateTo({
					url: `/pages/bikeDetail/bikeDetail?bikeId=${item.id}&&bikeType=${item.bikeType}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.brandDetailList {
		width: 100%;
		background: linear-gradient(#CFEAFF, #FFF);
		padding-bottom: 50rpx;
		// overflow-y: auto;
		box-sizing: border-box;
		// margin: 0 50rpx 0;

		.bike {
			margin-bottom: 40rpx;

			image {
				width: 100%;
			}

			.bikeParams {
				text-align: center;

				.bikeName {
					margin: 20rpx auto
				}
			}
		}

		.loadMore {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 14px;
			color: grey;
		}

		// }
	}
</style>
